<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
    <!-- 
        总结
            a. Vue构造函数中必须要传入一个配置参数，data表示数据对象
            b. data中的数据属性，可以直接放入到表达式中渲染
            c. 表达式中，可以直接输出，也可以写成表达式
                好的写法： msg.toUpperCase()
                           num + 3
                           方法调用或者数组的一些写法
                           str.length
                           flag ? '已完成' : '未完成'
                          ...
                不好的写法：  if() {}
                            for()
                            switch...
            d. 有返回值的才是表达式，可以复制到js中找变量接收的才可以
     -->
</head>
<body>
    <div id="root" class="app">
        <h1>hello {{ msg }}.</h1>
        <p>num => {{ num }}</p>
        <p>flag => {{ flag }}</p>
        <p>un => {{ un }}</p>
        <p>nu => {{ nu }}</p>
        <!-- 高级一点儿的输出方式 -->
        <p>转换为大写： {{ msg.toUpperCase() }}</p>
        <p>数值进行运算: {{ num + 3 }}</p>
        <!-- 不要写赋值表达式 -->
        <!-- <p>数值进行运算: {{ num++ }}</p> -->
        <p>根据布尔值判断：{{ flag ? '已完成' : '未完成' }}</p>
    </div>

    <!-- <div class="app" id="app">
        <span>hello {{ msg }}.</span>
    </div> -->

    <script>
        // 如果能用变量获取到返回值的就可以书写在表达式上
        // let x = flag ? '已完成' : '未完成'

        // 去掉生产提示
        Vue.config.productionTip = false

        new Vue({
            // 指定dom容器
            // el: '#root',
            el: document.querySelector('#root'),
            // 声明数据对象
            data: {
                msg: 'world',
                num: 20,
                flag: false,
                un: undefined,
                nu: null,
            }
        })

        // new Vue({
        //     el: '#app',
        //     data: {
        //         msg: 'asdas'
        //     }
        // })

    </script>
</body>
</html>